<template>
    <view>
        <!-- 加载界面效果 -->
        <view class="loading" v-if="loading">
            <image class="img" src="/static/images/icon/loading.gif"></image>
            <view class="text">数据加载中...</view>
        </view>
        <!-- 有内容界面效果 -->
        <view class="container" v-else>
            <view class='banner-wrap'>
                <!-- 轮播图右下角图标 -->
                <view class='current-item'>
                    <view class='in-item'>
                        <view class='current-mask'></view>
                        <view class='current-content'>
                            <view class='icon'>
                                <image class='img' src='/static/images/icon/img-icon.png'></image>
                            </view>
                            <view class='num'>{{current+1}}/{{gallery.length}}</view>
                        </view>
                    </view>
                </view>
                <!-- 有轮播图 -->
                <block v-if="gallery.length">
                    <swiper @change="current=$event.detail.current" class="banner banner-style1" indicator-dots autoplay
                        circular interval="3000" duration="1000">
                        <swiper-item class="item" v-for="item in gallery" :key="item.id">
                            <image @click="previewImage(item.img_url)" :src="item.img_url" class="slide-image"
                                mode="aspectFill" />
                        </swiper-item>
                    </swiper>
                </block>
                <!-- 没有轮播图 -->
                <block v-else>
                    <view class='no-image'>
                        <image class='img' src='/static/images/icon/no-img.png'></image>
                    </view>
                </block>
            </view>
            <view class='info-wrap'>
                <view class='l'>
                    <view class='goods-title'>{{info.name}}</view>
                    <view class='goods-intro'>{{info.goods_brief}}</view>
                </view>

                <!-- 分享按钮-->
                <view class='r' @click="isShare=true">
                    <view class='share'>
                        <image class='icon' src='/static/images/icon/share.png'></image>
                        <view class='text'>分享</view>
                    </view>
                </view>
            </view>
            <view class='price-info'>
                <view class="l">
                    <view class="now-price">
                        <view class="sym">¥</view>
                        <view class="num">{{info.retail_price}}</view>
                    </view>
                </view>
                <view class="r">
                    <view class='stock'>库存 {{info.goods_number}}</view>
                    <view class='sales'>已售 {{info.sell_volume}} 份</view>
                </view>
            </view>
            <view class='section-nav' @click="attrShow=true">
                <view class="t">{{ checkAttrStr || '请选择' }}</view>
                <view class="arrow"></view>
            </view>
            <view class='details-wrap'>
                <view class="title">商品详情</view>
                <view class="show">
                    <view class='details-image-wrap' v-html="info.goods_desc">
                    </view>
                </view>
            </view>
            <!-- 规格渲染弹框 -->
            <view class="attr-pop-box" :hidden="!attrShow" @click="attrShow=false">
                <view class="attr-pop" @click.stop="attrShow=true">
                    <view class="close" @click.stop="attrShow=false">
                        <image class="icon" src="/static/images/icon/icon-close.png"></image>
                    </view>
                    <view class="img-info">
                        <view class="img-wrap">
                            <!-- 小图片 -->
                            <image class="img" :src="checkProductImg"></image>
                        </view>
                        <view class="info">
                            <view class='price-range'>
                                <view class='retail-price'>
                                    <view class='p-title'>零售价：</view>
                                    <view class='g-price'>{{checkProduct.retail_price}}元</view>
                                </view>
                            </view>
                            <view class="a">库存：{{checkProduct.goods_number}} </view>
                            <!-- 规格描述：有规格就展示如   红色-20寸 -->
                            <view class="a">{{checkAttrStr}}</view>
                        </view>
                    </view>
                    <view class="spec-con">
                        <!-- 这里渲染商品规格-->
                        <view class='spec-item' v-for="(item,index) in specificationList" :key="index">
                            <view class='name'>{{item.name}}</view>
                            <view class="values">
                                <!-- class描述：  selected标识选中，out-stock表示禁用-->
                                <view class="value" @click="changeAttr(obj.id, index)"
                                    :class="{ selected: checkAttrId[index] === obj.id}" v-for="obj in item.valueList"
                                    :key="obj.id">
                                    <view>{{obj.id}}-{{obj.value}} </view>
                                </view>

                            </view>
                        </view>
                        <view class="number-item">
                            <view class="name">数量 {{info.goods_unit}}</view>
                            <view class="selnum">
                                <button class="cut" @click="reduceNum">-</button>
                                <input value="1" @input="changeInput" v-model="buyNum" class="number" type="number"
                                    cursor-spacing="100" />
                                <button class="add" @click="addNum">+</button>
                            </view>
                        </view>
                    </view>
                </view>
            </view>
            <!-- 底部固定信息 -->
            <view class="cart-add-box">
                <view class='l'>
                    <view class='left-icon form-button'>
                        <button class='index-btn' @click="goUrl('/pages/index/index',false,true)" hover-class="none">
                            <image class='icon' src='/static/images/nav/icon-index.png'></image>
                            <view class='icon-text'>主页</view>
                        </button>
                    </view>
                    <button class='left-icon contact-button' open-type="contact" hover-class="none">
                        <image class='icon' src='/static/images/icon/chat.png'></image>
                        <view class='icon-text'>客服</view>
                    </button>
                    <view class="left-icon" @click="goUrl('/pages/cart/cart',false,true)">
                        <!-- 购物车角标的数量-->
                        <text class="cart-count" v-if="token">{{goodsCount}}</text>
                        <image class='icon' src='/static/images/nav/icon-cart.png'></image>
                        <view class='icon-text'>购物车</view>
                    </view>
                </view>
                <!-- 有goods_number且在售状态展示加入购物车按钮和立即购买按钮 -->
                <block v-if="info.goods_number && info.is_on_sale===1">
                    <!-- 规格对应库存还有 -->
                    <block v-if="checkProduct.goods_number">
                        <view class="to-cart-btn" @click="addCart(0)">加入购物车</view>
                        <view class="to-pay-btn" @click="addCart(1)">立即购买</view>
                    </block>
                    <!-- 规格对应库存没有了 -->
                    <block>
                        <!-- <view class="cart-empty">商品已售罄</view> -->
                    </block>
                </block>
                <!-- goods_number 没有显示 -->
                <block v-else>
                    <view class="cart-empty">商品已售罄</view>
                </block>
                <!-- 商品下架显示 -->
                <block v-else-if="info.is_on_sale !== 1">
                    <view class="cart-empty">商品已下架</view>
                </block>
                <!-- goods_number 没有显示 -->
                <block v-else>
                    <view class="cart-empty">商品已售罄</view>
                </block>
            </view>
            <!-- 分享的弹框界面 -->
            <view class="dialog dialog_show" v-if="isShare">
                <view class="dialog-mask2" @click="isShare=false"></view>
                <view class="dialog-fixed dialog-share">
                    <view class="share-wrap">
                        <view class='content'>
                            <view class="share-block">
                                <button open-type="share" class='block share-btn' hover-class="none">
                                    <image class="img" src="/static/images/icon/weixin.png"></image>
                                    <view class="text">发给好友/发到微信群</view>
                                </button>
                            </view>
                        </view>
                    </view>
                    <view class="cancel" @click="isShare=false">取消</view>
                </view>
            </view>
        </view>

    </view>
</template>

<script>
    import {
        mapState,
        mapGetters
    } from 'vuex'
    export default {
        data() {
            return {
                gallery: [], // 轮播图数据
                info: {}, // 商品数据
                productList: [], // 产品列表
                specificationList: [], // 规格列表
                loading: false, // 数据加载中
                current: 0, //当前展示的轮播图的图片索引
                isShare: false, //是否分享
                attrShow: false, //规格选中的弹框
                checkAttrId: [], //每次规格数据中选中的规格值 Id
                buyNum: 1, //商品购买数量
            };
        },
        //页面初次加载的时候触发，能获得页面的路径信息
        onLoad(options) {
            //1.从地址中拿到商品数据，调用获取数据的方法
            this.getGoodData(options.id)

            //2.只有登录的时候才能获得到购物车角标数量,从vuex中调请求获取数据
            if (this.token) {
                this.$store.dispatch('cart/getInitData')
            }

        },
        // 页面分享事件的监听
        onShareAppMessage(res) {
            // res.from  有2个值 menu表示点击右上角分享触发； button标识点击分享按钮触发
            if (res.from === 'menu') {
                return {
                    title: "菜单-爱购商城-" + this.info.name,
                    path: "/pkgGood/detail/detail?id=" + this.info.id,
                    imageUrl: this.info.https_pic_url
                }
            }
            if (res.from === 'button') {
                return {
                    title: "按钮-爱购商城-" + this.info.name,
                    path: "/pkgGood/detail/detail?id=" + this.info.id,
                    imageUrl: this.info.https_pic_url
                }
            }
        },
        methods: {
            //1.获取商品信息
            async getGoodData(goodId) {
                //数据加载
                this.loading = true
                const res = await uni.$http.get('/goods/detail?id=' + goodId)
                // console.log(res);

                //处理图片过大的问题
                res.info.goods_desc = res.info.goods_desc.replaceAll('style=""/>', '')
                res.info.goods_desc = res.info.goods_desc.replaceAll('<img ',
                    '<img style="width:100%;display:block;"')

                //赋值
                this.gallery = res.gallery
                this.info = res.info
                this.productList = res.productList
                this.specificationList = res.specificationList
                //关闭加载
                this.loading = false

                //设置默认选中的规格
                if (res.specificationList.length) {
                    res.specificationList.forEach(item => {
                        this.checkAttrId.push(item.valueList[0].id)
                    })
                }
            },
            //2.图片预览
            previewImage(val) {
                // val是当前点击的轮播图地址
                // 获得所有的轮播图图片地址
                const urlArr = this.gallery.map(item => item.img_url)
                // 预览的方法
                uni.previewImage({
                    urls: urlArr, // 所有图片地址
                    current: val // 当前显示图片地址
                })
            },
            //3.修改选中规格值信息
            changeAttr(id, idx) {
                console.log("我要修改第" + idx + '组的选中的规格值，值修改为' + id);
                this.checkAttrId.splice(idx, 1, id)
                // this.checkAttrId.splice(idx, 1, id)
            },
            //4.商品数量增加
            addNum() {
                if (this.buyNum === 3) {
                    return uni.showToast({
                        title: '每人限购3件',
                        icon: 'none'
                    })
                }
                this.buyNum++

            },
            //5.商品数量减少
            reduceNum() {
                if (this.buyNum <= 1) {
                    return uni.showToast({
                        title: '至少选择1件',
                        icon: 'none'
                    })
                }
                this.buyNum--
            },
            //6.监听数量input的手动输入
            changeInput() {
                if (this.buyNum > 3) {
                    uni.showToast({
                        title: '每人限购3件',
                        icon: 'none'
                    })
                    return this.buyNum = 3
                } else if (this.buyNum <= 1) {
                    uni.showToast({
                        title: '至少选择1件',
                        icon: 'none'
                    })
                    return this.buyNum = 1
                }
            },
            //7.加入购物车
            async addCart(addType) {
                //判断有无登录
                if (!this.token) {
                    return uni.showToast({
                        title: '请先登录',
                        icon: 'none'
                    })
                }
                //是否有规格
                if (this.specificationList.length) {
                    //判断是否选择了规格（就是判规格的弹框有没有打开）
                    if (!this.attrShow) return this.attrShow = true
                }
                //判断库存是否还有库存
                if (this.buyNum > this.checkProduct.goods_number) {
                    return uni.showToast({
                        title: '库存不足',
                        icon: 'none'
                    })
                }
                //发送购物车请求
                const res = await uni.$http.post('/cart/add', {
                    addType: addType, // 0：正常加入购物车，1:立即购买，2:再来一单
                    goodsId: this.checkProduct.goods_id,
                    number: this.buyNum,
                    productId: this.checkProduct.id
                })
                // console.log('加入购物车的商品', res);
                //关闭规格弹窗
                this.attrShow = false

                //addType=0是加入购物车，addType=1是立即购买，点击立即购买后跳转页面
                if (addType === 0) {
                    // 存储购物车信息【增加】,将购物车的数据更新到仓库
                    this.$store.commit('cart/setCartData', res)
                }

                if (addType === 1) {
                    uni.navigateTo({
                        url: '/pkgOrder/checkout/checkout?addType=1'
                    })
                }

            }
        },
        computed: {
            ...mapState('user', ['token']),
            ...mapGetters('cart', ['goodsCount']),
            //1.选中的产品信息
            checkProduct() {
                //如果有规格
                if (this.specificationList.length) {
                    //将checkAttrId变成字符串，规格值ID_规格值ID
                    let row = this.productList.find(item => {
                        item.goods_specification_ids === this.checkAttrId.join('_')
                    })
                }
                //如果没有规格，productList至少也会有一个属性
                return this.productList[0] || {}
            },
            //2.选中的规格描述
            checkAttrStr() {
                //如果有规格
                if (this.specificationList.length) {
                    let str = []
                    // item 是改组选中的规格值ID ，index是第一个规格组
                    this.checkAttrId.forEach((item, index) => {
                        const value = this.specificationList[index].valueList.find(obj => obj.id === item).value
                        str.push(value)
                    })
                    return str.join(',')
                }
                //如果没有规格
                return ''
            },
            //3.获取商品信息
            checkProductImg() {
                //如果有规格
                if (this.specificationList.length) {
                    let picUrl = ''
                    this.checkAttrId.forEach((item, index) => {
                        //item是选中的规格值，index是第几组
                        let row = this.specificationList[index].valueList
                            .find(val => val.id === item)
                        if (row.pic_url) {
                            picUrl = row.pic_url
                        }
                    })
                    return picUrl || this.info.https_pic_url
                }
                //如果没有规格
                return this.info.https_pic_url
            },
        }
    }
</script>

<style lang="scss">
    .container {
        background-color: #f8f8f8;
        min-height: 100%;
        align-items: stretch;
        overflow-x: hidden;
        position: relative;
        width: 100%;
    }


    .loading {
        width: 100%;
        height: 100%;
        display: flex;
        justify-content: center;
        align-items: center;
        flex-direction: column;
    }

    .loading .img {
        width: 90rpx;
        height: 90rpx;
    }

    .loading .text {
        margin-top: 20rpx;
        width: 100%;
        font-size: 24rpx;
        color: #999;
        text-align: center;
    }

    /* banner start  */

    .banner-wrap {
        width: 100%;
        box-sizing: border-box;
        background: #fff;
        position: relative;
    }

    .banner-wrap .no-image {
        width: 100%;
        height: 560rpx;
        box-sizing: border-box;
        display: flex;
        justify-content: center;
        align-items: center;
        position: relative;
    }

    .banner-wrap .no-image .img {
        width: 200rpx;
        height: 200rpx;
    }

    .banner-wrap .no-image .no-img-text {
        width: 100%;
        text-align: center;
        font-size: 26rpx;
        color: #f8f8f8;
        height: 560rpx;
        line-height: 560rpx;
        position: absolute;
        left: 0;
    }

    .banner-wrap .banner {
        width: 100%;
        box-sizing: border-box;
    }

    .banner-style1 {
        height: 560rpx;
    }

    .banner-style1 .slide-image {
        width: 100%;
        height: 560rpx;
        box-sizing: border-box;
    }

    .banner-wrap .current-item {
        position: absolute;
        right: 30rpx;
        bottom: 14rpx;
        z-index: 2;
    }

    .banner-wrap .current-item .in-item {
        display: flex;
        justify-content: center;
        align-items: center;
        padding: 4rpx 12rpx;
        height: 40rpx;
        position: relative;
        min-width: 60rpx;
    }

    .banner-wrap .current-item .in-item .current-mask {
        width: 100%;
        border-radius: 100rpx;
        box-sizing: border-box;
        background: #000;
        opacity: 0.6;
        /* padding: 4rpx 10rpx; */
        height: 40rpx;
        position: absolute;
        left: 0;
        z-index: 3;
    }

    .banner-wrap .current-item .in-item .current-content {
        /* width: 100%; */
        box-sizing: border-box;
        display: flex;
        justify-content: center;
        align-items: center;
        /* padding: 4rpx 10rpx; */
        /* height: 36rpx; */
        /* position: absolute; */
        /* left: 0; */
        z-index: 8;
    }

    .banner-wrap .current-item .in-item .current-content .icon {
        display: flex;
        justify-content: center;
        align-items: center;
        height: 22rpx;
        width: 22rpx;
        margin-right: 8rpx;
    }

    .banner-wrap .current-item .in-item .current-content .icon .img {
        height: 22rpx;
        width: 22rpx;
    }

    .banner-wrap .current-item .in-item .current-content .num {
        color: #fff;
        font-size: 24rpx;
    }

    .swiper {
        height: 680rpx;
        width: 100%;
    }

    .swiper image {
        height: 100%;
        width: 100%;
    }

    .share-btn .share {
        width: 48rpx;
        height: 48rpx;
    }

    .share-btn .text {
        font-size: 20rpx;
        color: #fff;
    }

    .btn-wrap {
        display: flex;
        justify-content: flex-end;
    }

    .btn-icon-wrap {
        display: flex;
        flex-direction: column;
        align-items: center;
        margin-left: 25rpx;
    }

    .btn-icon-wrap .icon-text {
        font-size: 20rpx;
    }

    .info-wrap {
        display: flex;
        justify-content: space-between;
        background: #fff;
        padding: 30rpx 30rpx 30rpx 30rpx;
        border-bottom: 1rpx solid #f1f1f1;
    }

    .info-wrap .l {
        display: flex;
        flex-direction: column;
        justify-content: center;
        width: 82%;
    }

    .info-wrap .l .goods-title {
        width: 100%;
        font-size: 30rpx;
        text-overflow: ellipsis;
        white-space: nowrap;
        overflow: hidden;
        font-weight: 500;
    }

    .info-wrap .l .goods-intro {
        font-size: 26rpx;
        color: #888;
        text-overflow: ellipsis;
        white-space: nowrap;
        overflow: hidden;
    }

    .info-wrap .r {
        display: flex;
        justify-content: center;
        align-items: center;
        width: 100rpx;
    }

    .info-wrap .r .share {
        display: flex;
        justify-content: center;
        align-items: center;
        background: #fff;
        padding: 0;
    }

    .info-wrap .r .share::after {
        border: none;
    }

    .info-wrap .r .share .icon {
        width: 26rpx;
        height: 28rpx;
        margin: 0 6rpx 2rpx 0;
    }

    .info-wrap .r .share .text {
        font-size: 26rpx;
        color: #888;
    }

    .price-info {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 14rpx 30rpx 24rpx 30rpx;
        /* border-bottom: 1rpx solid #f1f1f1; */
        background: #fff;
    }

    .price-info .l {
        display: flex;
        flex-direction: column;
    }

    .price-info .l .now-price {
        display: flex;
        justify-content: flex-start;
        align-items: baseline;
        font-size: 30rpx;
        color: #ff3456;
        margin-right: 10rpx;
    }

    .price-info .l .now-price .sym {
        font-size: 24rpx;
    }

    .price-info .l .now-price .num {
        font-size: 28rpx;
        font-weight: 500;
    }

    .price-info .l .other-price {
        display: flex;
        flex-direction: column;
        font-size: 26rpx;
    }

    .price-info .l .other-price .price-w {
        display: flex;
        justify-content: flex-start;
        align-items: center;
    }

    .price-info .l .other-price .text {
        font-size: 26rpx;
        color: #ff3456;
        margin-right: 10rpx;
    }

    .price-info .l .other-price .price {
        display: flex;
        justify-content: flex-start;
        align-items: baseline;
        font-size: 26rpx;
        color: #ff3456;
    }

    .price-info .l .other-price .price .sym {
        font-size: 22rpx;
    }

    .price-info .l .other-price .price .num {
        font-size: 26rpx;
    }

    .price-info .l .old-price {
        display: flex;
        justify-content: flex-start;
        align-items: baseline;
        font-size: 26rpx;
        color: #888;
        text-decoration: line-through;
        margin-right: 20rpx;
    }

    .price-info .l .only {
        font-size: 26rpx;
        color: #ffc310;
    }

    .price-info .l .old-price .sym {
        font-size: 20rpx;
    }

    .price-info .r {
        display: flex;
        justify-content: flex-end;
        align-items: center;
        font-size: 26rpx;
        color: #888;
    }

    .price-info .r .stock {
        margin-right: 20rpx;
    }

    .bottom-wrap {
        background: #fff;
        height: 80rpx;
        padding: 0 24rpx;
        font-size: 28rpx;
        color: #233445;
        display: flex;
        justify-content: flex-start;
        align-items: center;
        margin-bottom: 18rpx;
    }

    .attr-item {
        margin-right: 10rpx;
    }

    .section-nav {
        width: 100%;
        height: 100rpx;
        padding: 0 24rpx;
        font-size: 30rpx;
        line-height: 100rpx;
        color: #233445;
        background: #fff;
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin: 24rpx 0;
        box-sizing: border-box;
        /* border-bottom: 1rpx solid #eee; */
    }

    .section-nav .t {
        font-size: 28rpx;
        color: #333;
    }

    .arrow {
        width: 10rpx;
        height: 10rpx;
        border-top: 4rpx solid #ccc;
        border-right: 4rpx solid #ccc;
        transform: rotate(45deg);
    }

    .details-wrap {
        /* width: 100%; */
        background-color: #fff;
        margin-bottom: 100rpx;
        padding: 0 0 50rpx 0;
    }

    .details-wrap .title {
        padding: 40rpx 30rpx;
        font-size: 32rpx;
        text-align: left;
    }

    .details-wrap .tab-nav {
        padding: 0 24rpx;
        border-bottom: 1rpx solid #eee;
        display: flex;
        justify-content: space-between;
    }

    .details-wrap .tab-nav .tab {
        display: flex;
        justify-content: center;
        width: 50%;
    }

    .details-wrap .tab-nav .tab .tab-text {
        font-size: 30rpx;
        width: 60%;
        color: #233445;
        height: 80rpx;
        line-height: 80rpx;
        text-align: center;
    }

    .details-wrap .tab-nav .active .tab-text {
        color: #ff3456;
        border-bottom: 1px solid #ff3456;
    }

    .details-wrap .tab-nav .default {
        color: #233445;
        border-bottom: 1px solid #fff;
    }

    .details-image-wrap {
        width: 100%;
        height: auto;
        overflow: hidden;
    }

    .details-image-wrap .show-detail {
        width: 100%;
        text-align: center;
        font-size: 26rpx;
        color: #999;
        height: 200rpx;
        line-height: 200rpx;
    }

    .details-image {
        width: 100%;
    }

    .details-image-wrap image {
        width: 100%;
        display: block;
    }

    .no-order-wrap {
        width: 100%;
        height: 500rpx;
    }

    .no-order-wrap .header {
        width: 100%;
        padding: 0 24rpx;
        font-size: 28rpx;
        font-weight: bold;
        color: #233445;
        line-height: 100rpx;
    }

    .cart-add-box {
        width: 100%;
        height: 110rpx;
        position: fixed;
        bottom: 0;
        left: 0;
        /* border-top:1px solid #eee;  */
        background-color: #fff;
        display: flex;
        justify-content: space-between;
        z-index: 10;
    }

    .cart-add-box .l {
        display: flex;
        justify-content: space-around;
        background: #fafafa;
        padding: 0 20rpx;
        width: 40%;
        box-sizing: border-box;
    }

    .cart-add-box .l .index-btn {
        display: flex;
        flex-direction: column;
        position: relative;
        padding: 0;
    }

    .cart-add-box .l .index-btn::after {
        border: 0;
    }

    .index-btn .icon-text {
        width: 100%;
        height: 40rpx;
        line-height: 40rpx;
        text-align: center;
        font-size: 20rpx;
        color: #666;
    }

    .index-btn .icon {
        width: 48rpx;
        height: 48rpx;
        margin: 0 auto;
        /* margin-bottom: 26rpx; */
    }

    .cart-add-box .l .left-icon {
        width: 30%;
        display: flex;
        flex-direction: column;
        position: relative;
        padding-top: 10rpx;
        margin-top: 4rpx;
    }

    .contact-button {
        padding: 10rpx 0 0 0;
        margin: 4rpx 0 0 0;
    }

    .contact-button:after {
        padding: 0 !important;
        margin: 0 !important;
    }

    .left-icon .icon-text {
        width: 100%;
        height: 40rpx;
        line-height: 40rpx;
        text-align: center;
        font-size: 20rpx;
        color: #666;
    }

    .cart-add-box .to-cart-btn {
        height: 110rpx;
        width: 30%;
        line-height: 100rpx;
        color: #192841;
        background: linear-gradient(to right, #f8cd4e, #fae277);
        /* 标准的语法（必须放在最后） */
        font-size: 28rpx;
        text-align: center;
        font-weight: 500;
    }

    .cart-add-box .to-pay-btn {
        height: 110rpx;
        width: 30%;
        line-height: 100rpx;
        color: #fff;
        background: -webkit-linear-gradient(left, #fdbb43, #ff347d);
        /* Safari 5.1 - 6.0 */
        background: -o-linear-gradient(right, #fdbb43, #ff347d);
        /* Opera 11.1 - 12.0 */
        background: -moz-linear-gradient(right, #fdbb43, #ff347d);
        /* Firefox 3.6 - 15 */
        background: linear-gradient(to right, #ff3456, #ff347d);
        /* 标准的语法（必须放在最后） */
        font-size: 28rpx;
        font-weight: 500;
        text-align: center;
    }

    .left-icon .icon {
        width: 48rpx;
        height: 48rpx;
        margin: 0 auto;
        /* margin-bottom: 26rpx; */
    }

    .cart-add-box .service-call {
        width: 20%;
        height: 100rpx;
        background-color: #fafafa;
        display: flex;
        align-items: center;
        position: relative;
    }

    .service-call .icon-text {
        width: 100%;
        height: 40rpx;
        line-height: 40rpx;
        text-align: center;
        position: absolute;
        left: 0;
        bottom: 0;
        font-size: 20rpx;
        color: #666;
    }

    .service-call .call-icon {
        width: 50rpx;
        height: 50rpx;
        margin: 0 auto;
        margin-bottom: 26rpx;
    }

    .cart-add-box .share-to-cart-btn {
        height: 100rpx;
        width: 60%;
        line-height: 100rpx;
        color: #fff;
        background: -webkit-linear-gradient(left, #fdbb43, #ff347d);
        /* Safari 5.1 - 6.0 */
        background: -o-linear-gradient(right, #fdbb43, #ff347d);
        /* Opera 11.1 - 12.0 */
        background: -moz-linear-gradient(right, #fdbb43, #ff347d);
        /* Firefox 3.6 - 15 */
        background: linear-gradient(to right, #ff3456, #ff347d);
        /* 标准的语法（必须放在最后） */
        font-size: 32rpx;
        text-align: center;
    }

    .cart-add-box .share-cart-empty {
        height: 100rpx;
        width: 60%;
        line-height: 100rpx;
        color: #666;
        background: #f2f2f2;
        font-size: 32rpx;
        text-align: center;
    }

    .share-left-icon {
        width: 20%;
        display: flex;
        align-items: center;
        position: relative;
        background-color: #fafafa;
    }

    .cart-add-box .share-left-icon .cart-count {
        height: 30rpx;
        width: 30rpx;
        z-index: 10;
        position: absolute;
        top: 18rpx;
        right: 36rpx;
        background: #ff3456;
        text-align: center;
        font-size: 20rpx;
        color: #fff;
        line-height: 30rpx;
        border-radius: 50%;
    }

    .cart-add-box .alone-btn {
        height: 100rpx;
        width: 50%;
        line-height: 100rpx;
        background: #fafafa;
        color: #233445;
        font-size: 32rpx;
        text-align: center;
    }

    .cart-add-box .alone-empty-btn {
        height: 100rpx;
        width: 100%;
        line-height: 100rpx;
        color: #666;
        background: #f2f2f2;
        font-size: 32rpx;
        text-align: center;
    }

    .cart-add-box .cart-empty {
        height: 110rpx;
        width: 80%;
        line-height: 100rpx;
        color: #666;
        background: #f2f2f2;
        font-size: 32rpx;
        text-align: center;
    }

    .cart-add-box .left-icon .cart-count {
        height: 30rpx;
        min-width: 30rpx;
        padding: 0 6rpx;
        z-index: 10;
        position: absolute;
        top: 0rpx;
        right: 0rpx;
        background: #ff3456;
        text-align: center;
        font-size: 20rpx;
        color: #fff;
        line-height: 30rpx;
        border-radius: 30rpx;
    }

    .show {
        display: block;
        height: auto;
    }

    .hidden {
        display: none;
    }

    .attr-pop-box {
        width: 100%;
        height: 100%;
        position: fixed;
        background: rgba(0, 0, 0, 0.5);
        z-index: 8;
        bottom: 0;
        /* display: none; */
    }

    .attr-pop {
        width: 100%;
        height: auto;
        /* max-height: 780rpx; */
        padding: 30rpx 30rpx 40rpx;
        background: #fff;
        position: fixed;
        z-index: 9;
        bottom: 100rpx;
        box-sizing: border-box;
    }

    .attr-pop .temp-tip {
        margin: 60rpx 0 30rpx 0;
        background: #ffe49c;
        font-size: 24rpx;
        padding: 20rpx;
    }

    .attr-pop .close {
        position: absolute;
        width: 48rpx;
        height: 48rpx;
        right: 31.25rpx;
        overflow: hidden;
        top: 31.25rpx;
    }

    .attr-pop .close .icon {
        width: 48rpx;
        height: 48rpx;
    }

    .attr-pop .img-info {
        display: flex;
        justify-content: flex-start;
        margin-bottom: 20rpx;
    }

    .attr-pop .img-info .img-wrap {
        min-width: 160rpx;
        height: 160rpx;
        margin-right: 20rpx;
    }

    .img-info .info .price-range {
        display: flex;
        flex-direction: column;
    }

    .attr-pop .img-info .info {
        width: 100%;
        display: flex;
        flex-direction: column;
    }

    .price-range .retail-price {
        display: flex;
        justify-content: flex-start;
        align-items: baseline;
    }

    .price-range .retail-price .p-title {
        font-size: 26rpx;
        margin-right: 10rpx;
    }

    .price-range .retail-price .g-price {
        font-size: 30rpx;
        font-weight: 500;
        color: #ff3456;
    }

    .attr-pop .img {
        float: left;
        height: 160rpx;
        width: 160rpx;
        background: #f4f4f4;
    }

    .attr-pop .p {
        font-size: 33rpx;
        color: #333;
        height: 33rpx;
        line-height: 33rpx;
        margin-bottom: 10rpx;
    }

    .attr-pop .a {
        font-size: 28rpx;
        color: #333;
        /* height: 40rpx; */
        line-height: 40rpx;
        margin-top: 10rpx;
    }

    .spec-con {
        width: 100%;
        height: auto;
        overflow: hidden;
    }

    .spec-con .name {
        margin-bottom: 10rpx;
        font-size: 29rpx;
        color: #333;
    }

    .spec-con .number-item {
        margin-bottom: 10rpx;
    }

    .spec-con .stock-num {
        font-size: 30rpx;
    }

    .spec-con .values {
        height: auto;
    }

    .spec-con .value {
        display: inline-block;
        /* height: 62rpx; */
        padding: 4rpx 35rpx;
        line-height: 50rpx;
        text-align: center;
        margin-right: 25rpx;
        margin-bottom: 14rpx;
        font-size: 26rpx;
        border: 1px solid #ccc;
    }

    .spec-con .value.disable {
        border: 1px solid #ccc;
        color: #ccc;
    }

    .spec-con .value.selected {
        border: 1px solid #ff3456;
        color: #ff3456;
    }

    .spec-con .value.out-stock {
        border: 1px solid #a3a3a3;
        color: #696969;
        background: #dbdbdb;
    }

    .number-item .selnum {
        width: 280rpx;
        height: 62rpx;
        border: 1px solid #ccc;
        display: flex;
    }

    .number-item .cut {
        width: 90rpx;
        height: 100%;
        text-align: center;
        line-height: 58rpx;
        color: #555;
        border-radius: 0;
        background: #fff;
        border: none;
    }

    .number-item .number {
        width: 100rpx;
        height: 100%;
        text-align: center;
        line-height: 62rpx;
        border-left: 1px solid #ccc;
        border-right: 1px solid #ccc;
        float: left;
        font-size: 32rpx;
    }

    .number-item .add {
        width: 90rpx;
        height: 100%;
        text-align: center;
        line-height: 58rpx;
        color: #555;
        border-radius: 0;
        background: #fff;
        border: none;
    }

    button::after {
        border-radius: 0;
        border: none;
    }

    .dialog_show .dialog-mask2 {
        display: block;
    }

    .dialog-share .share-wrap {
        background: #fafafa;
        display: flex;
        flex-direction: column;
        padding: 30rpx;
        width: 100%;
        box-sizing: border-box;
    }


    .dialog-fixed {
        position: fixed;
        bottom: 0;
        width: 100%;
        transform: translateY(150%);
        transition: all 0.4s ease;
        z-index: 33;
        display: flex;
        flex-direction: column;
        align-items: center;
    }

    .dialog_show .dialog-share {
        transform: translateY(0);
        background: #e0e0e0;
    }

    .dialog_show .dialog-mask {
        display: block;
    }

    .dialog_show .dialog-mask2 {
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        z-index: 10;
        background: rgba(0, 0, 0, 0.5);
        display: none;
    }

    .dialog_show .dialog-mask2 {
        display: block;
    }

    .dialog-share .share-wrap {
        background: #fafafa;
        display: flex;
        flex-direction: column;
        padding: 30rpx;
        width: 100%;
        box-sizing: border-box;
    }

    .dialog-share .cancel {
        padding: 30rpx;
        color: #333;
        text-align: center;
        font-size: 30rpx;
        background: #fafafa;
        width: 100%;
        box-sizing: border-box;
        margin-top: 12rpx;
    }

    .share-wrap .top {
        border-bottom: 1rpx solid #f1f1f1;
        font-size: 28rpx;
        color: #111;
        text-align: center;
        padding-bottom: 30rpx;
    }

    .share-wrap .top .img {
        width: 50rpx;
        height: 50rpx;
    }

    .share-wrap .content {
        display: flex;
        flex-direction: column;
    }

    .share-wrap .content .tip {
        font-size: 26rpx;
        color: #666;
        text-align: center;
        padding: 30rpx 0;
    }

    .share-wrap .content .share-block {
        display: flex;
        justify-content: center;
        align-items: center;
        padding-bottom: 4rpx;
    }

    .share-wrap .content .share-block .block {
        /* border: 1rpx solid #f0f0f0; */
        display: flex;
        flex-direction: column;
        align-items: center;
        padding: 32rpx;
        margin: 0 20rpx 0 0;
        background: #fff;
        border-radius: 20rpx;
        box-shadow: 2rpx 2rpx 5rpx #f1f1f1;
    }

    .share-wrap .content .share-block .block.share-btn::after {
        border: 1rpx solid #f0f0f0;
    }

    .share-wrap .content .share-block .block:last-child {
        margin-right: 0;
    }

    .share-wrap .content .share-block .block .img {
        width: 50rpx;
        height: 50rpx;
        margin-bottom: 20rpx;
    }

    .share-wrap .content .share-block .block .text {
        text-align: center;
        color: #555;
        font-size: 26rpx;
        height: 40rpx;
        line-height: 40rpx;
    }
</style>
